<template>
	<div class="shop_view">
		<div class="shop_hd clearfix">
			<span class="left">全部道具</span>
			<div class="right" @click="jumpMe">
				<span class="left">我的道具</span>
				<i class="iconfont icon-right left"></i>
			</div>
		</div>
		<div class="shop_prop" v-infinite-scroll="moreList"
                infinite-scroll-disabled="loading"
                infinite-scroll-immediate-check = "true"
                infinite-scroll-distance="100">
			<ul>
				<li v-for="item in shopList" @click="selectProp(item)" >
					<img class="left" src="../../../../images/shovel.png">
					<div class="prop_info">
						<span>{{item.propName}}</span>
						<p>{{item.propDsc}}</p>
					</div>
					<div class="right">
						<span>{{item.yunCur}}</span>
						<p>芸券</p>
					</div>
				</li>
				<li>
					<img class="left" src="../../../../images/expect_bg_01.png">
					<div class="prop_info">
						<span class="continued">敬请期待</span>
					</div>
				</li>
			</ul>
		</div>
		<div v-show="clickState" class="buy_shade" @click="clickShow"></div>
		<div class="buy_box">
			<div class="buy_info" v-show="clickState">
				<img class="left" src="../../../../images/shovel.png">
				<div class="prop_info">
					<span>{{toolName}}</span>
					<p>数量：<em>{{clickNum}}</em> 把</p>
				</div>
				<div class="right">
					<i @click="propNum('minus')" class="left iconfont icon-jianshao-"></i>
					<i @click="propNum('add')" class="right iconfont icon-zengjia-"></i>
				</div>
			</div>
			<div class="shop_menu">
				<div class="left" @click="clickShow">
					<img v-show="clickNum==0" class="prop_bg" src="../../../../images/expect_bg_01.png">
					<div class="selected_prop" v-if="selectState">
						<img src="../../../../images/shovel.png" >
						<span>{{clickNum}}</span>
					</div>
				</div>
				<div class="right">
					<span v-if="selectState" class="left"><span>{{propPrice*clickNum}}</span> 芸券</span>
					<button v-if="!selectState">购买</button>
					<button v-if="selectState" class="selected" @click="buyBtn">购买</button>
				</div>
			</div>
		</div>
		<prop-promt v-if="propShow" :param="propParam" v-on:promptBtn="propBox"></prop-promt>
	</div>
</template>
<script>
	import propPromt from './propPromt.vue'
	import getData2 from 'src/service/getData2.js'
	import * as types from 'src/vuex/types.js'
  import * as types1 from 'src/vuex/appendType.js'
	import { mapState } from 'vuex'
	import { Toast } from 'mint-ui'
	export default {
		data(){
			return {
				propShow:false,
				selectState:false,
				propParam:{},
				loading:true,
				clickState:false,
				clickNum:0,
				propPrice:0,
				toolName:'',
				toolId:'',
				clickDouble:false
			}
		},
		components:{propPromt},
		created:function(){
			this.$store.commit(types1.shop_list);
            this.$store.commit(types1.shop_page,1);
            this.$store.commit(types.GET_SCORLL_STATUS,true);
			this.clickMoreList();
		},
		computed:{
            ...mapState({
                userInfo:state => state.user.userInfo,
                shopList:state => state.shop.shopList,
                shopPageLimit:state => state.shop.shopPageLimit,
            })
        },
		methods:{
			jumpMe(){
				this.$router.push({'path':'/myProp'});
			},
			propBox(hidden){
                // this.propShow = this.propShow ? false : true;
                this.propShow = false;
            },
            //选道具
            selectProp(item){
            	this.selectState=true;
            	this.toolName=item.propName;
            	this.clickNum++;
            	this.propPrice=item.yunCur;
            	this.toolId=item.propId;
            	this.propParam={
            		toolId:this.toolId,
            		toolNum:this.clickNum,
            		toolsName:this.toolName
            	}
            },
            // 加减数量
            propNum(type){
            	if (type=="add") {
            		this.clickNum++;
            	}else if(type=="minus"){
            		if(this.clickNum==1){
            			this.clickState=false;
            			this.selectState=false;
            			this.propPrice=0;
            			this.toolName='';
	            	}
            		this.clickNum--;
            	}
            },
            //购买
            buyBtn(){
            	if (this.clickDouble) {
            		return
            	}
            	let instance=Toast('购买中...');
            	let _this=this;
            	this.clickDouble=true;
            	getData2.buyProp({method:'post',data:{num:this.clickNum,propId:this.toolId,yunCur:this.propPrice*this.clickNum}},this.userInfo.usrId).then(function(rep){
            		instance.close();
	                if(rep.respCode=='00'){
	                	_this.propParam={
		            		toolId:_this.toolId,
		            		toolNum:_this.clickNum,
		            		toolsName:_this.toolName
		            	}
	                	_this.clickState=false;
	            			_this.selectState=false;
	            			_this.propPrice=0;
	            			_this.clickNum=0;
	            			_this.toolName='';
            				Toast({
                            message: '购买成功',
                            duration: 1000
                        });
                        _this.propShow = true;
                    }else{
                        Toast({
                            message: rep.content,
                            duration: 1000
                        });
                    }
                    setTimeout(function(){_this.clickDouble = false;},300);
	            }).catch(function(rep){
	            	instance.close();
                    setTimeout(function(){_this.clickDouble = false;},300);
                });
            },
            // 点击出现道具
            clickShow:function(){
            	if (this.clickNum==0) {
            		return
            	}
        		this.clickState=!this.clickState;
            },
            clickMoreList:function(){

                let me = this;
                this.$store.dispatch('shopProp',{method:'post'}).then(function(rep){
                    if(rep.content.result.length>0){
                        if(rep.content.result.length == me.shopPageLimit){
                            me.loading = false;
                        }
                    }
                });
            },
            moreList:function(){
                this.loading = true;
                this.clickMoreList();

            },

		},
		beforeRouteLeave(to, from, next){
				next()
		}

	}
</script>
<style scoped>
	.shop_view{
		height: 100%;
		overflow-y: auto;
		background-color: #3a393e;
	}
	.shop_hd{
		padding: 0 0.667rem;
		line-height: 3.2rem;
		overflow: hidden;
	}
	.shop_hd span{
		font-size: 1rem;
		color:#999;
		padding-left: 0.75rem;
	}
	.shop_hd i{font-size: 1rem;line-height: 3rem;}
	.shop_hd i:before{
		float: left;
	}
	.shop_hd .right,.shop_hd .right .left{color:#ec4e8a;}
	.shop_prop{padding-bottom: 3.5rem}
	.shop_prop ul{padding:0 0.667rem;}
	.shop_prop li{
		width:100%;
		height: 5.0625rem;
		background-color: #48474c;
		color:#999;
		margin-bottom: 0.75rem;
		border-radius: 3px;
		padding:0 1rem 0;
		overflow: hidden;
		/*display: -webkit-flex;*/
		/*display: flex;*/
		/*-webkit-align-items: center;*/
		/*align-items: center;*/
	}
	.shop_prop li img{
		width: 3rem;
		height: 3rem;
		margin-right:1rem;
		margin-top:1.03rem;
	}
	.shop_prop .prop_info{
		/*margin: 0 3.125rem 0 4rem;*/
		width: calc(100% - 12rem);
		height: 3.065rem;
		margin-top:1rem;
		float: left;
	}
	.shop_prop .prop_info span{
		font-size: 1rem;
		color:#e5e5e5;
		display: block;
		margin:0.2rem 0;
	}
	.shop_prop .prop_info .continued{
		margin-top:0.865rem;
	}
	.shop_prop .prop_info p{
		font-size: 0.8rem;
	}
	.shop_prop div.right{
		min-width: 2rem;
		float: right;
		height: 3rem;
		margin-top:1.03rem;
	}
	.shop_prop div.right span{
		display: block;
		text-align: center;
		font-size: 1.5rem;
		color:#ec4e8a;
		line-height: 1.15;
	}
	.shop_prop div.right p{
		font-size: 0.85rem;
		text-align: center;
	}
	.buy_box{
		width: 100%;
		position: absolute;
		left: 0;
		bottom:0;
		z-index: 9;
	}
	.shop_menu{
		width: 100%;
		height: 3.43rem;
		background-color: #3a393e;
		border-top:1px solid #4c4b4f;
		padding:0.5rem 0.667rem;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.shop_menu div.left{position: relative;}
	.shop_menu .prop_bg{
		display: block;
		width: 2.25rem;
		height: 2.25rem;
	}
	.shop_menu button{
		width: 5.6875rem;
		height: 2.25rem;
		border-radius: 3px;
		background-color: #514f58;
		color:#999;
		font-size: 1rem;
	}
	button.selected{color:#fff;background-color: #ec4e8a;}
	.shop_menu .right span.left{
		color:#999;
		font-size: 0.85rem;
		line-height: 2.65rem;
		margin-right: 0.6rem;
	}
	.shop_menu .right span span{
		color:#ec4e8a;
		font-size: 1.6rem;
	}
	.selected_prop{
		width: 2.25rem;
		height: 2.25rem;
		text-align: center;
		background-color:rgba(153,153,153,0.3);
		border-radius: 3px;
		position: absolute;
		left: 0;
		top: 0;
	}
	.selected_prop img{
		display: inline-block;
		margin-top:0.5rem;
		width: 1.25rem;
		height: 1.25rem;
	}
	.selected_prop span{
		color:#fff;
		border-radius: 50%;
		background-color: #ec4e8a;
		font-size: 0.8rem;
		width: 1.18rem;
		/*height: 1.18rem;*/
		line-height: 1.18rem;
		text-align: center;
		position: absolute;
		right: -0.6rem;
		top: -0.46rem;
	}
	.buy_shade{
		width: 100%;
		height: 100%;
		background-color: rgba(45,44,47,0.9);
		position: fixed;
		left: 0;
		top:0;
	}
	.buy_info{
		width: 100%;
		height: 6rem;
		border-top: 1px solid #38373a;
		background-color: #2e2d30;
		padding:0 1rem 0 0.9rem;
		box-sizing:border-box;
		/*display: -webkit-flex;*/
		/*display: flex;*/
		/*-webkit-align-items: center;*/
		/*align-items: center;*/
		/*-webkit-box-sizing:border-box;*/
	}
	.buy_info img{
		width: 3rem;
		height: 3rem;
		margin-right: 1rem;
		margin-top:1.5rem;
	}
	.buy_info div.right{
		color:#ec4e8a;
		float:right;
		width: 4.5rem;
		height: 1.34rem;
		margin-top:2.333rem;

	}
	.buy_info div.right i{
		font-weight: bold;
		font-size: 1.2rem;
	}
	.buy_info .prop_info{
		width: calc(100% - 8.5rem);
		float:left;
		margin-top:1.4675rem;
	}
	.buy_info .prop_info span{
		font-size: 1rem;
		color:#e5e5e5;
		display: block;
		margin:0.2rem 0;
	}
	.buy_info .prop_info p{
		font-size: 0.8rem;
		color:#999;
	}
	.buy_info .prop_info em{color:#e5e5e5;font-style: normal;}
</style>
